<template>
	<view class="purse">
		<z-paging ref="paging" v-model="purseData" @query="queryBalanceChangeFlowPageByApp">
			<template #top>
				<view class="top pt10">
					<view class="top_box w100p">
						<view class="d-flex j-sa h100p">
							<view class="d-flex flex-column j-center a-center">
								<view class="d-flex a-center my_money mb5">累计充值</view>
								<view class="d-flex a-center config">
									<u-icon name="rmb" color="#fff" size="28"></u-icon>
									<view>{{userInfo.grandTotalAmount}}</view>
								</view>
							</view>
							<view class="d-flex flex-column j-center a-center">
								<view class="d-flex a-center my_money mb5">我的余额</view>
								<view class="d-flex a-center config">
									<u-icon name="rmb" color="#fff" size="28"></u-icon>
									<view>{{userInfo.remainingAmount}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="title d-flex a-center center_header w100p mt15">
						<view class="line mr10"></view>
						<view class="zjmx">资金明细</view>
					</view>
				</view>
			</template>

			<view class="center">
				<view class="center_box mt10 w100p">
					<view class="d-flex a-center p20 my_boder" v-for="(item, index) in purseData" :key="index">
						<!-- <view></view> -->
						<view class="mr10">
							<u--image :showLoading="true" :src="item.flowType==0?iconInfo.rechargeFlow:iconInfo.orderFlow"
								width="96rpx" height="96rpx"></u--image>
						</view>
						<view class="d-flex flex-column j-sb flex-1 center_box_item">
							<view class="d-flex a-center j-sb">
								<view class="name">{{item.flowType==0?'充值':'消费'}}</view>
								<view class="count f_family_din">{{item.flowType==0?'+':'-'}}{{item.flowAmount}}</view>
							</view>
							<view class="time">
								{{item.createTime}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryBalanceChangeFlowPageByApp
	} from '@/api/index'
	
	export default {
		onLoad() {
			this.iconInfo = uni.getStorageSync('iconInfo')
			// this.queryBalanceChangeFlowPageByApp()
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				iconInfo: {},
				purseData: [],
				pageIndex: 1
			}
		},
		methods: {
			queryBalanceChangeFlowPageByApp(pageNo, pageSize) {
				queryBalanceChangeFlowPageByApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					customerCode: this.userInfo.customerCode
				}).then(res => {
					// this.purseData = res.object.data
					this.$refs.paging.complete(res.object.data);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.purse {
		height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500;
	}

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;

		.top_box {
			width: 700rpx;
			height: 230rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #53b789, #8cdfb7 100%);

			.my_money {
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
			}

			.config {
				font-size: 44rpx;
				font-weight: 500;
				color: #fff;
			}

		}
		.title {
			width: 700rpx;
			.line {
				width: 12rpx;
				height: 36rpx;
				background: #38d19a;
				border-radius: 4rpx;
			}
			
			.zjmx {
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;

		.center_header {
			width: 700rpx;


		}

		.center_box {
			width: 700rpx;
			background: #ffffff;
			border-radius: 8px;
			// box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);



			.my_boder {
				border-bottom: 1rpx solid #D8D8D8;
			}

			.my_boder:last-child {
				border-bottom: 0rpx solid #D8D8D8;
			}

			.center_box_item {
				height: 96rpx;
			}


			.name,
			.count {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>